<template>
	<view class="personal-information">
		<uni-forms ref="userInfos" :rules="registerRules" :modelValue="userInfo" labelWidth="150rpx" class='user-form'>
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="userInfo.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" required name="age">
				<uni-easyinput v-model="userInfo.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="性别" required>
				<uni-data-checkbox v-model="userInfo.sex" :localdata="sexs" class='movebottom' />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="mobilePhone">
				<uni-easyinput v-model="userInfo.mobilePhone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" required name="IDNumber">
				<uni-easyinput v-model="userInfo.IDNumber" placeholder="请输入身份证号" />
			</uni-forms-item>
			<uni-forms-item label="邮箱">
				<uni-easyinput v-model="userInfo.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item label="擅长" required name="great">
				<uni-easyinput v-model="userInfo.great" placeholder="请输入擅长内容" />
			</uni-forms-item>
			<uni-forms-item label="简介" required name="introduction">
				<uni-easyinput type="textarea" v-model="userInfo.introduction" placeholder="请输入简介" />
			</uni-forms-item>
		</uni-forms>
		<button class="btn" @click="preserve">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentUser: this.$store.state.currentUser,
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],

				userInfo: {
					name: this.$store.state.currentUser.name || '',
					age: this.$store.state.currentUser.age || '',
					sex: this.$store.state.currentUser.sex || 0,
					mobilePhone: this.$store.state.currentUser.mobilePhone || '',
					IDNumber: this.$store.state.currentUser.IDNumber || '',
					email: this.$store.state.currentUser.email || '',
					great: this.$store.state.currentUser.great || '',
					introduction: this.$store.state.currentUser.introduction || ''
				},

				// 校验规则
				registerRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					},
					mobilePhone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							format: 'number',
							maximum: 11,
							minimum: 11,
							errorMessage: '请输入11位的手机号'
						}]
					},
					account: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					IDNumber: {
						rules: [{
							required: true,
							errorMessage: '身份证不能为空'
						}]
					},
					great: {
						rules: [{
							required: true,
							errorMessage: '请填写擅长领域'
						}]
					},
					introduction: {
						rules: [{
							required: true,
							errorMessage: '请填写简介'
						}]
					},

				},
			}
		},
		mounted() {
			console.log(this.currentUser);
		},
		methods: {
			preserve() {
				this.$refs['userInfos'].validate().then(res => {
					uni.showToast({
						title: `保存成功`
					})
					for (let key in this.userInfo) {
						this.currentUser[key] = this.userInfo[key]
					}
					let doctorManagement = this.$store.state.doctorManagement
					doctorManagement = doctorManagement.map((item) => {
						if (item.account == this.currentUser.account) {
							item = this.currentUser
							// console.log(item);
						}
						return item
					})
					this.$store.commit('setDoctorManagement', doctorManagement)
					this.$store.commit('getLogin', this.currentUser)

				}).catch(err => {
					// console.log('err', err);
				})
			}
		},

	}
</script>

<style lang="scss">
	.personal-information {
		width: 100vw;
		opacity: 0.8;
		background: linear-gradient(white, transparent);
		padding-bottom: 80rpx;

		.uni-forms,
		.user-form {
			width: 600rpx;
			padding: 80rpx 0 10rpx 0;
			margin: 0 auto;
		}

		.btn {
			width: 500rpx;
		}

		.movetext {
			height: 100%;
			display: flex;
			align-items: center;
		}

		.movebottom {
			margin-top: 15rpx !important;
		}
	}
</style>
